<template>
  <div class="container">
    <div class="tabsNew">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="weightTabs">
        <el-tab-pane label="管理端" name="spz" />
        <el-tab-pane label="企业端" name="qb" />
      </el-tabs>
    </div>
      <topSearch
      :form="form"
      @addItem="addItem"
      @searchlist="searchlist"
      @resetform="resetform"
    ></topSearch>
    <el-row>
      <el-table
        :data="tableData"
        row-key="id"
        border
        style="width: 100%;margin-top:20px"
        size="small"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          prop="title"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="belong" label="分类" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.belong == 2">管理端</span>
            <span v-else-if="scope.row.belong == 1">企业端</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="group" label="分组" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="level" label="级别" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="rule"
          label="后端路由"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="route"
          label="前端路由"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="route_icon"
          label="图标"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="quick_icon"
          label="快捷操作图标"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="is_show" label="显示" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_show"
              @change="changestatusShow(scope.row)"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.status"
              @change="changestatus(scope.row)"
              :active-value="1"
              :inactive-value="0"
              active-text="启用"
              inactive-text="禁用"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteTableItem(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20]"
            :page-size="10"
            background
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <!-- 弹框 -->
    <subdialog
      :isshowDialog="isshowDialog"
      :dialogTitle="dialogTitle"
      :formType="formtype"
      :prepareLineOption="prepareLineOption"
      @confirm="confirm"
      @closedialog="closedialog"
      :dialogdata="dialogdata"
    ></subdialog>
  </div>
</template>

<script type="text/javascript">
import {
  userRuleList,
  userRuleOption,
  userRuleRead,
  userRuleUpdateIsShow,
  userRuleUpdatestatus,
} from "@/api/userManagement";
import subdialog from "./components/dialog";
import topSearch from "@/components/topSearch";
export default {
  data() {
    return {
      isshowDialog: false,
      activeName: "spz",
      dialogTitle: "新增",
      formtype: 0,
      page: 1,
      rows: 10,
      form: {
        state: null,
      },
      tableData: [],
      category: [],
      prepareLineOption: [],

      pagination: {},
      dialogdata: null,
      currentIndex: 2,
    };
  },
  components: {
    subdialog,
    topSearch,
  },
  created() {
    this.getData();
    this.getprepareLineOption();
  },
  methods: {
    handleClick(tab, event) {
      let currentIndex = 0;
      if (tab.index == 0) {
        currentIndex = 2;
      } else {
        currentIndex = 1;
      }
      this.currentIndex = currentIndex;
      this.getData();
    },
    async deleteTableItem(val) {
      let data = await userRoleDelete({ id: val.id });
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    //切换类型
    async changestatus(val) {
      let status = val.status == 0 ? 1 : 0;
      let params = {
        id: val.id,
        status: status,
      };
      let data = await userRuleUpdatestatus(params);
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    async changestatusShow(val) {
      let is_show = val.is_show == 0 ? 1 : 0;
      let params = {
        id: val.id,
        is_show: is_show,
      };
      let data = await userRuleUpdateIsShow(params);
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    searchlist() {
       this.page= 1,
      this.getData();
    },
    resetform() {
      this.getData();
    },
    handleSizeChange(val) {
      this.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    //获取下拉
    async getprepareLineOption() {
      let data = await userRuleOption({select:1});
      this.prepareLineOption = data.data;

    },
    //详情
    async getquestionRead(id) {
      let data = await userRuleRead({ id: id });
      this.dialogdata = data.data;
    },

    //新增
    addItem() {
      this.isshowDialog = true;
      this.dialogTitle = "新增";
      this.formtype = 0;
    },
    //编辑
    editItem(val) {
    
      this.isshowDialog = true;
      this.dialogTitle = "编辑";
      this.formtype = 1;
        this.getquestionRead(val.id);
    },

    //提交成功
    confirm() {
      this.isshowDialog = false;
      this.getData();
    },
    closedialog() {
      this.isshowDialog = false;
    },
    //获取列表
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.keyWord) {
        params.keyword = this.form.keyWord;
      }
      params.belong = this.currentIndex;
      console.log(params);
      let data = await userRuleList(params);
      console.log(data);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep {
  .is-active {
    font-weight: bold;
  }
   .weightTabs .el-tabs__item{
        font-size: 16px;
    }
}

</style>
